<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui 动态表格弹出层示例</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
  <style>
    #tableContent {
      display: none; /* 默认隐藏 */
    }
  </style>
</head>
<body>

<button id="openLayer">打开表格</button>

<!-- 隐藏的 div，用于存放表格内容 -->
<div id="tableContent">
  <table id="demo" lay-filter="test"></table>
</div>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use(['layer', 'table'], function(){
  var layer = layui.layer;
  var table = layui.table;

  // 定义表格数据
  var tableData = [
    {id: 1, name: '张三', age: 28},
    {id: 2, name: '李四', age: 22},
    {id: 3, name: '王五', age: 30}
  ];

  document.getElementById('openLayer').onclick = function() {
    // 使用 layer.open 打开一个新的弹出层
    layer.open({
      type: 1, // 表示这是一个页面层
      title: '动态表格数据',
      shadeClose: true, // 点击遮罩关闭
      area: ['40%', '40%'], // 设置宽度和高度
      content: layui.$('#tableContent'), // 显示隐藏的 div 内容
      success: function(layero, index) {
        // 在弹出层成功打开后渲染表格
        table.render({
          elem: '#demo',
          data: tableData,
          cols: [[
            {field: 'id', title: 'ID', width: 80, sort: true},
            {field: 'name', title: '姓名', width: 120},
            {field: 'age', title: '年龄', width: 80, sort: true}
          ]],
          page: true // 不显示分页
        });
      }
    });
  };
});
</script>

</body>
</html>